<<template>
    <el-tooltip content="筛选列" placement="top" effect="dark">
        <el-popover
            placement="left-start"
            width="200"
            trigger="click">
            <el-checkbox-group 
                id="myCheckboxGroup"
                v-model="checkedArr" 
                @change="handleChange">
                <el-checkbox v-for="item in tableColumns"
                    :class="checkboxStyleFn(item)"
                    :label="item.label"
                    :key="item.prop" 
                    style="display:block;">
                    {{item.label}}
                </el-checkbox>
            </el-checkbox-group>
            <el-button
                round
                icon="el-icon-jk-lie"
                slot="reference">
            </el-button>
        </el-popover>
    </el-tooltip>
</template>

<<script>
import bus from 'common/bus.js';
// import { filter } from 'minimatch';

export default {
    props: ['tableColumns'],
    data() {
        return {
            checkedArr: [],
        };
    },
    created() {
        this.initCheckedArr();
    },
    methods: {
        handleChange(val) {
            this.$emit('tbChangeLie', val);
        },
        initCheckedArr() {
            this.tableColumns.forEach((element, index) => {
                if (element.isShow) {
                    this.checkedArr.push(element.label);
                }
            });
        },
        checkboxStyleFn(item) {
            if (item.isShow) {
                return 'testClass1';
            } else {
                return 'testClass2';
            }
        },
        
    },
    watch: {
        
    },
}
</script>
<style scoped>
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        
        color: #606266;
    }
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
        background-color: #5fb878;
        border-color: #5fb878;
    }
    #myCheckboxGroup /deep/ .el-checkbox{
        margin-bottom: 8px;
    }
</style>